<template>
  <div id="app">
    <MySelect :url="url" :myValue.sync="value" @optionClick="optionClick">
      <!-- //slot怎么传参 -->
      <!-- 
      1:父组件无法直接使用子组件实例中的属性
      所以传参是要引用子组件注册过的属性
      在子组件的slot上绑定所需要传递的对象，如<slot :item="item"></slot>
      然后在父组件中我们使用v-slot接收插槽中的对象，并自定义命名为gx，
      然后通过gx.item就可以拿到子组件传递过来的属性
      另外可以不命名为gx，直接结构出item并且，可以将item改命名为ooo，写法是item:ooo
      2:子组件通过this.$emit("update:myValue",newValue)传递给父组件中：myValue属性要修改
      且父组件需要用.sync接收
     -->
      <template v-slot:default="{ item: ooo }">
        <span style="float: left">{{ ooo.id }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{ ooo.name }}</span>
      </template>

    </MySelect>
    <input v-model.number="value" />
    <!-- 传递props是可定制修改for循环中的options -->
    <!-- <SearchSelect v-model="id" :options="list" :props111="{
      label: 'name',
      value: 'id'
    }" placeholder="placeholder" /> -->
    <VirtualSelect :list="list" visualViewport="height: 200px;width: 300px;"></VirtualSelect>
    <!-- <VirtualCopyDeep :list="list" :value="1"></VirtualCopyDeep> -->
    <VirtualSelf :database="list"></VirtualSelf>



  </div>
</template>
<script>
import MySelect from './components/MySelect.vue';
import SearchSelect from './components/SearchSelect.vue';
import VirtualSelect from './components/VirtualSelect.vue';
import VirtualCopyDeep from './components/VirtualCopyDeep.vue'
import VirtualSelf from './components/VirtualSelf.vue'
import axios from "axios"
export default {
  name: 'HomeView',
  components: {
    MySelect,
    SearchSelect,
    VirtualSelect,
    VirtualCopyDeep,
    VirtualSelf
  },
  data() {
    return {
      value: 1,
      url: "http://localhost:3000/result",
      id: 1,
      list: []
    }
  },
  created() {

  },
  mounted() {
    this.getData(this.url)
  },
  methods: {
    getData(url) {
      //console.log("getData"+url)
      if (url) {
        axios.get(url).then((res) => {
          this.list = res.data
        }).catch((err) => {
          console.log(err)
        })
      }
    },
    optionClick(val) {
      console.log(val)
    }

  }

}
</script>
<style></style>
